<template>
  <div class="statistics-manager" id="statistics-manager">
    <!-- 工具栏 -->
    <div class="tooltips">
      <div class="bars" id="bars">
        <div class="bar">
          <a-space :size="10">
            <div class="tool-bar">
              <div style="min-width: 70px">企业层级：</div>
              <a-select
                style="width: 240px"
                @change="handleChange"
                placeholder="请选择企业层级"
              >
                <a-select-option value="jack"> Jack </a-select-option>
                <a-select-option value="lucy"> Lucy </a-select-option>
                <a-select-option value="disabled" disabled>
                  Disabled
                </a-select-option>
                <a-select-option value="Yiminghe"> yiminghe </a-select-option>
              </a-select>
            </div>
            <div class="tool-bar">
              <a-select
                style="width: 240px"
                @change="handleChange"
                placeholder="二级筛选条件"
              >
                <a-select-option value="jack"> Jack </a-select-option>
                <a-select-option value="lucy"> Lucy </a-select-option>
                <a-select-option value="disabled" disabled>
                  Disabled
                </a-select-option>
                <a-select-option value="Yiminghe"> yiminghe </a-select-option>
              </a-select>
            </div>
          </a-space>
        </div>
        <div class="btn">
          <a-button type="danger">数据导入</a-button>
          <a-button type="primary">数据导出</a-button>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <a-row :gutter="[10, 10]">
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box" id="c1">
          <div class="circle"></div>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box" id="c2"></div>
      </a-col>
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box" id="c3">
          <div class="circle"></div>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box" id="c4"></div>
      </a-col>
      <a-col class="gutter-row" :span="24">
        <div class="gutter-box" id="c5"></div>
      </a-col>
      <a-col class="gutter-row" :span="24">
        <div class="gutter-box" id="c6"></div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
var echarts = require("echarts");
export default {
  name: "statistics-manager",
  mounted() {
    var c1ElementParent = document.getElementById("c1").parentNode;
    var clientWidth = c1ElementParent.clientWidth;
    var c1 = document.getElementById("c1");
    var c2 = document.getElementById("c2");
    var c3 = document.getElementById("c3");
    var c4 = document.getElementById("c4");
    var c5 = document.getElementById("c5");
    var c6 = document.getElementById("c6");

    c1.style.width = clientWidth - 10 + "px";
    c1.style.height = 500 + "px";
    c3.style.width = clientWidth - 10 + "px";
    c3.style.height = 500 + "px";
    c2.style.width = clientWidth - 10 + "px";
    c2.style.height = 500 + "px";
    c4.style.width = clientWidth - 10 + "px";
    c4.style.height = 500 + "px";
    c5.style.width = clientWidth * 2 - 10 + "px";
    c5.style.height = 500 + "px";
    c6.style.width = clientWidth * 2 - 10 + "px";
    c6.style.height = 500 + "px";

    this.createCharts("c1", "项目数量统计（个）");
    this.createPieChart("c2", "项目数量占比统计");
    this.createCharts("c3", "项目成本统计（元）");
    this.createPieChart("c4", "项目成本占比");
    this.createBarChart("c5", "项目数量趋势统计（个）");
    this.createLineChart("c6", "项目成本趋势统计（元）");
  },
  methods: {
    handleChange() {},
    /**
     * 创建图表
     */
    createCharts(id, text) {
      var myChart = echarts.init(document.getElementById(id));
      var img =
        "";

      var option = {
        title: {
          text: text,
        },
        legend: {
          orient: "horizontal",
          top: "0%",
          right: "1%",
          data: ["Apple", "Grapes", "Pineapples", "Oranges", "Bananas"],
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 150,
                height: 150,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 335,
                name: "Apple",
              },
              {
                value: 310,
                name: "Grapes",
              },
              {
                value: 234,
                name: "Pineapples",
              },
              {
                value: 135,
                name: "Oranges",
              },
              {
                value: 1548,
                name: "Bananas",
              },
            ],
            radius: ["44%", "75%"],
            itemStyle: {
              borderColor: "rgba(254, 249, 249, 1)",
              borderWidth: 4,
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    /**
     * 创建饼图
     */
    createPieChart(id, text) {
      var myChart = echarts.init(document.getElementById(id));
      var option = {
        title: {
          text: text,
        },
        legend: {
          orient: "horizontal",
          top: "0%",
          right: "1%",
          data: ["Apple", "Grapes", "Pineapples", "Oranges", "Bananas"],
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 335,
                name: "Apple",
              },
              {
                value: 310,
                name: "Grapes",
              },
              {
                value: 234,
                name: "Pineapples",
              },
              {
                value: 135,
                name: "Oranges",
              },
              {
                value: 1548,
                name: "Bananas",
              },
            ],
            itemStyle: {
              borderColor: "rgba(252, 251, 251, 1)",
              borderWidth: 2,
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    /**
     * 创建条形图
     */
    createBarChart(id, text) {
      var myChart = echarts.init(document.getElementById(id));

      var option = {
        title: {
          text: text,
        },
        color: ["#003366", "#006699", "#4cabce", "#e5323e"],
        dataset: {
          source: [
            ["type", "2012", "2013", "2014", "2015", "2016"],
            ["Forest", 320, 332, 301, 334, 390],
            ["Steppe", 220, 182, 191, 234, 290],
            ["Desert", 150, 232, 201, 154, 190],
            ["Wetland", 98, 77, 101, 99, 40],
          ],
        },
        legend: {
          top: "0%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            seriesLayoutBy: "row",
          },
          {
            type: "bar",
            seriesLayoutBy: "row",
          },
          {
            type: "bar",
            seriesLayoutBy: "row",
          },
          {
            type: "bar",
            seriesLayoutBy: "row",
          },
        ],
      };
      myChart.setOption(option);
    },
    /**
     * 创建折线图
     */
    createLineChart(id, text) {
      var myChart = echarts.init(document.getElementById(id));

      var option = {
        title: {
          text: text,
        },
        legend: {
          top: "0%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {},
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "邮件营销",
          },
          {
            data: [750, 532, 901, 234, 1890, 1330, 820],
            type: "line",
            name: "邮件营销1",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.bars {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  // background-color: #fff;
  & > div:nth-child(2) {
    width: 230px;
    padding: 0 10px 0 20px;
  }
  & > div:nth-child(1) {
    flex: 1;
  }
  &::-webkit-scrollbar {
    width: 1px;
    cursor: pointer;
  }
}
.btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bar {
  width: calc(100% + 40px - 30px - 40px);
  display: flex;
  overflow-x: auto;
  .tool-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20px;
  }
}
.statistics-manager {
  background-color: #f3f4f7;
  min-height: 100%;
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  .tooltips {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 10px;
  }
}
.charts-one {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 1.2rem;
  color: #333333;
  font-weight: bold;
  z-index: 999;
}
.gutter-box {
  background: #fff;
  padding: 30px;
  text-align: center;
  border-radius: 10px;
  position: relative;

  .circle {
    border-radius: 50%;
    border: 1px dashed #9cf5ff;
    width: 100px;
    height: 100px;
    position: fixed;
    // bottom: calc(50% - 65px);
    // left: calc(50% - 50px);
    bottom: 10px;
    right: 10px;
  }
}
</style>